<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
    <title>REWORK - Responsive HTML Template Preview - Themeforest</title>
    
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <link rel="stylesheet" href="./css/style.css" media="screen" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
    <link rel="stylesheet" href="./css/flexslider.css" media="screen" />

    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jQuery.BlackAndWhite.min.js"></script>
    <script src="./js/jquery.easing-1.3.min.js"></script>
    <script src="./js/jquery.flexslider-min.js"></script>
    <script src="./js/jquery.isotope.min.js"></script>
    <script src="./js/jquery.jcarousel.min.js"></script>
    <script src="./js/jquery.touchSwipe.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <script src="./js/selectnav.min.js"></script>
    <script src="./js/custom.js"></script>
    <script type="text/javascript" src="http://rework.reworkmedia.net/[JS library]"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
      <script type="text/javascript" src="./js/selectivizr-min.js"></script>
      <noscript><link rel="stylesheet" href="http://rework.reworkmedia.net/[fallback css]" /></noscript>
    <![endif]-->

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-32209063-3']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<!-- Main Container -->
<div id="body-wrapper">

    <!-- Header -->
    <div id="header" class="container clearfix">

        <a href="./index.html" id="logo"><img src="./images/logo.png" alt="" /></a>

        <!-- Navigation -->
        <ul id="navigation">
            <li>
                <a href="./index.html">Home</a>
                <ul>
                    <li><a href="./homepage_v2.html">Simple Version</a></li>
                </ul>
            </li>
            <li>
                <a href="./about.html">Features</a>
                <ul>
                    <li><a href="./about.html">About Us</a></li>
                    <li><a href="./services.html">Services</a></li>
                    <li><a href="./pricing_tables.html">Pricing Tables</a></li>
                    <li><a href="./portfolio_details.html">Third Level Item<i></i></a>
                        <ul>
                            <li><a href="./portfolio_details.html">This is a simple example</a></li>
                            <li><a href="./portfolio_details.html">Of the third level</a></li>
                            <li><a href="./portfolio_details.html">Navigation item</a></li> 
                        </ul>
                    </li>
                    <li><a href="./shortcodes.html">Shortcodes</a></li>
                </ul>
            </li>
            <li>
                <a href="./blog.html">Blog</a>
                <ul>
                    <li><a href="./blog_post.html">Single Post</a></li>
                    <li><a href="./blog_v2.html">Alternative Version</a></li>
                </ul>
            </li>
            <li class="current">
                <a href="./portfolio_4_col.html">Portfolio</a>
                <ul>
                    <li><a href="./portfolio_2_col.html">2 Columns</a></li>
                    <li><a href="./portfolio_3_col.html">3 Columns</a></li>
                    <li><a href="./portfolio_4_col.html">4 Columns</a></li>
                    <li><a href="./portfolio_details.html">Single Project</a></li>
                    <li><a href="./portfolio_v2.html">Alternative Version</a></li>
                </ul>
            </li>
            <li>
                <a href="./contact.html">Contact</a>
            </li>
        </ul>
        <!-- /Navigation -->
        
    </div>
    <!-- /Header -->


    <!-- Content -->
    <div id="content" class="container clearfix">

        <h1 class="page-title-inner"><span class="section-title">Portfolio</span> We create <span class="accent">websites</span> and<br /> <span class="accent">brand identity</span></h1>

        <!-- Main Content -->
        <div id="main">

            <h1 class="capitalize">Publish What You Learn</h1>
            <div class="single-project">
                <img src="./images/content/single_project.jpg" alt="" />
            </div>
        </div>
        <!-- /Main Content -->

        <!-- Sidebar -->
        <div id="sidebar" class="project-description">

             <!-- Project Navigation -->
            <ul class="project-nav">
                <li><a href="./portfolio_details.html" class="prev">Next</a></li>
                <li><a href="./portfolio_details.html" class="back">Back to Portfolio</a></li>
                <li><a href="./portfolio_details.html" class="next">Previous</a></li>
            </ul>
            <!-- /Project Navigation -->

            <div class="clear"></div>

            <div class="widget short">
                <h5>Overview</h5>
                <p>Nam ultricies dolor eu velit varius scelerisque. Vestibulum in lacus in felis pretium feugiat non sed elit. Duis pretium, urna sed pellentesque tincidunt, neque massa imperdiet nisi, sed cursus leo magna pretium elit. Proin bibendum ipsum a ante viverra lobortis. Phasellus id augue ligula, nec ultrices augue. Aliquam erat volutpat.</p>
            </div>

            <div class="widget short">
                <h5>Job Description</h5>
                <ul class="check-bold compressed">
                    <li>Branding</li>
                    <li>Design Best Practices</li>
                    <li>Performance</li>
                    <li>Responsive Design</li>
                    <li>Typography</li>
                </ul>
            </div>

            <input type="button" value="Launch" class="red" />

        </div>
        <!-- /Sidebar -->

    </div>
    <!-- /Content -->

    <!-- Footer -->
    <div id="footer">
        <div class="container clearfix">

            <!-- About -->
            <div class="one-fourth">
                <a href="./index.html" class="logo"><img src="./images/logo_footer.png" alt="" /></a>
                <p>Proin fermentum sollicitudin ante, sed tempor eros molestie id. Donec volutpat odio eu mi imperdiet nec laoreet diam venenatis. Nunc ac purus aliquet mauris interdum accumsan.</p>
            </div>
            <!-- /About -->

            <!-- Twitter Feed -->
            <div class="one-fourth">
                <h5>Latest Tweets</h5>
                <div class="twitter-feed">
                    <p>
                        12 Outstanding Videos That Make Good Creative Use of AudioJungle Tracks <a href="./portfolio_details.html">http://t.co/7USabnpS</a>
                        <span class="tweet-time">7 hours ago</span>
                    </p>
                    <p>
                        Farewell Envato – I Will Miss You! <a href="./portfolio_details.html">http://t.co/ommJTJgp</a>
                        <span class="tweet-time">Sep 5 (1 day ago)</span>
                    </p>
                </div>
            </div>
            <!-- /Twitter Feed -->

            <!-- Contacts -->
            <div class="one-fourth">
                <h5>Contact Details</h5>
                <p class="address">3200 Sepulveda Blvd. <br />Manhattan Beach, CA 90266, USA</p>
                <p class="phone">Phone: (415) 124-5678 <br />Fax: (415) 124-5678</p>
                <p class="email">support@reworkmedia.com</p>
            </div>
            <!-- /Contacts -->

            <!-- Photo Stream -->
            <div class="one-fourth last">
                <h5>Photo Stream</h5>
                <ul class="photo-stream">
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_01.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_02.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_03.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_04.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_05.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_06.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_07.jpg" alt="" /></a></li>
                    <li><a href="./portfolio_details.html"><img src="./images/content/photo_stream_08.jpg" alt="" /></a></li>
                </ul>
            </div>
            <!-- /Photo Stream -->

        </div>

        <div class="clear"></div>

        <div class="info container clearfix">

            <!-- Copyright -->
            <ul class="copyright">
                <li>© 2012 REWORK MEDIA. All rights reserved</li>
                <li><a href="./portfolio_details.html">Legal Notice</a></li>
                <li><a href="./portfolio_details.html">Terms & Conditions</a></li>
            </ul>
            <!-- /Copyright -->

            <!-- Social Links -->
            <ul class="social-links">
                <li class="twitter"><a href="./portfolio_details.html">Twitter</a></li>
                <li class="facebook"><a href="./portfolio_details.html">Facebook</a></li>
                <li class="linkedin"><a href="./portfolio_details.html">LinkedIn</a></li>
                <li class="digg"><a href="./portfolio_details.html">Digg</a></li>
                <li class="vimeo"><a href="./portfolio_details.html">Vimeo</a></li>
            </ul>
            <!-- /Social Links -->

        </div>
    </div>
    <!-- /Footer -->

</div>
<!-- /Main Container -->

</body>
</html>